<template>
  <!-- 课程训练--------------------------------------  p2------------------------------------------------ -->
  <div>
    <!-- 头部 -->
    <div class="train_nav">
      <div
        class="train_one"
        @click="$router.push({ path: '/train_coordinate' })"
      >
        <p>跳绳平均个数(个)</p>
        <p>55.43</p>
        <div>
          <img src="../../../static/img/train1.png" />
          <p>协调</p>
        </div>
      </div>
      <div class="train_one">
        <p>50米平均时间(s)</p>
        <p>151.13</p>
        <div>
          <img src="../../../static/img/train2.png" />
          <p>速度</p>
        </div>
      </div>
      <div class="train_one">
        <p>平衡平均分数</p>
        <p>34.32</p>
        <div>
          <img src="../../../static/img/train3.png" />
          <p>平衡</p>
        </div>
      </div>
      <div class="train_one">
        <p>握力平均分(n)</p>
        <p>89.01</p>
        <div>
          <img src="../../../static/img/train4.png" />
          <p>力量</p>
        </div>
      </div>
      <div class="train_one">
        <p>敏捷平均分数(s)</p>
        <p>1.43</p>
        <div>
          <img src="../../../static/img/train5.png" />
          <p>敏捷</p>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <!-- 累计训练占比图 -->
    <div class="all_train">
      <div class="all_train_one">
        <p>累计训练成绩占比</p>
        <!-- 圆环图 -->
        <div class="circle_box">
          <div id="main" style="width: 1.0417rem; height: 1.0417rem"></div>
          <div class="main_text">
            <p v-for="(item, index) in circle_arr" :key="index">
              <span :style="{ background: item.color }"></span>
              <span>{{ item.name }} {{ item.num }}</span>
              <span>男 {{ item.nan }}</span>
              <span>女 {{ item.nv }}</span>
            </p>
          </div>
        </div>
      </div>
      <div class="all_train_one">
        <p>各项目平均成绩</p>
        <!-- 雷达图 -->
        <div>
          <div
            id="main_radar"
            style="width: 1.9229rem; height: 1.7021rem; margin: 0 auto"
          ></div>
        </div>
      </div>
    </div>

    <!-- 盒子 -->
    <div class="train_nav">
      <div class="show_one">
        <p>5543</p>
        <p>55.43</p>
      </div>
      <div class="show_one">
        <p>151</p>
        <p>55.43</p>
      </div>
      <div class="show_one">
        <p>432</p>
        <p>55.43</p>
      </div>
      <div class="show_one">
        <p>8901.2</p>
        <p>55.43</p>
      </div>
      <div class="show_one">
        <p>3143</p>
        <p>55.43</p>
      </div>
    </div>

    <!-- 跌级柱状图 -->
    <div class="class_jun">
      <p>年级平均成绩比例</p>
      <div class="jun_box">
        <div class="jun_left">
          <div>
            <div
              id="main_pie"
              style="width: 5.3083rem; height: 1.5625rem; margin: 0 auto"
            ></div>
          </div>
        </div>
        <div class="jun_right">
          <div class="main_text">
            <p v-for="(item, index) in pie_arr" :key="index">
              <span :style="{ background: item.color }"></span>
              <span>{{ item.name }} {{ item.num }}</span>
              <span>男 {{ item.nan }}</span>
              <span>女 {{ item.nv }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- 备案号 -->
    <p class="copyRight">
      CopyRight © phpok.com 2014-2020, All Right Reserved.
    </p>
  </div>
</template>

<script>
export default {
  name: 'homework-sup',
  data() {
    return {
      circle_arr: [
        { name: '及格', color: '#FFD02E', nan: 200, nv: 300, num: '30%' },
        { name: '良好', color: '#62F0FB', nan: 200, nv: 300, num: '30%' },
        { name: '优秀', color: '#0FDD8D', nan: 200, nv: 300, num: '30%' }
      ],
      pie_arr: [
        { name: '优秀', color: '#0FDD8D', nan: 200, nv: 300, num: '30%' },
        { name: '及格', color: '#7AEEEE', nan: 200, nv: 300, num: '30%' },
        { name: '良好', color: '#A7F7D2', nan: 200, nv: 300, num: '30%' },
        { name: '不及格', color: '#FDE08C', nan: 200, nv: 300, num: '30%' }
      ],

    }
  },
  created() {

  },
  mounted() {
    this.$nextTick(function () {
      this.myEcharts();
      this.myEchart_radar();
      this.myEcharts_pie();
    })

  },
  methods: {
    myEcharts() {
      let myChart = this.$echartsd.init(document.getElementById('main'))
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          show: false,
          data: ['及格', '良好', '优秀']
        },
        color: ['#FFD02E', '#62F0FB', '#0FDD8D'],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,

            label: {
              normal: {
                show: false,
                position: 'inner'
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },

            data: [
              { value: 100, name: '及格' },
              { value: 200, name: '良好' },
              { value: 300, name: '优秀' },
            ]

          }
        ]
      };
      myChart.setOption(option)
    },

    myEcharts_pie() {
      let myChart = this.$echartsd.init(document.getElementById('main_pie'))
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ['优秀', '良好', '及格', '不及格'],
          show: false,
        },
        color: ['#0FDD8D', '#7AEEEE', '#A7F7D2', '#FDE08C'],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级', '七年级', '八年级', '九年级', '十年级', '十一年级', '十二年级']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '优秀',
            type: 'bar',
            stack: '成绩',
            barWidth: 18,
            data: [320, 332, 301, 334, 390, 330, 320, 332, 301, 334, 390, 330]
          },
          {
            name: '良好',
            type: 'bar',
            stack: '成绩',
            data: [120, 132, 101, 134, 90, 230, 210, 332, 301, 334, 390, 330]
          },
          {
            name: '及格',
            type: 'bar',
            stack: '成绩',
            data: [220, 182, 191, 234, 290, 330, 310, 332, 301, 390, 330, 320]
          },
          {
            name: '不及格',
            type: 'bar',
            stack: '成绩',
            data: [150, 232, 201, 154, 190, 330, 410, 332, 301, 334, 390, 320]
          }
        ]
      };
      myChart.setOption(option)
    },

    myEchart_radar() {
      let myChart = this.$echarts.init(document.getElementById('main_radar'))
      let option = {
        // title: {
        //     // text: '基础雷达图'
        // },
        title: {
          text: '70%',
          x: 'center',
          y: 'center',
          textStyle: {
            color: '#FFF',
            fontSize: 20,
          }
        },
        legend: {
          borderWidth: 0
        },

        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: '#0FDD8D',
              borderRadius: 1,
              padding: [3, 5],
              fontSize: 12
            },
            formatter: function (value) {
              let list = value.split("");
              let text = [];
              let result = '';
              for (let i = 3; i <= list.length - 2; i++) {
                text.push(list[i]);
              }
              if (list[1] == 'a') {
                for (let j = 1; j <= text.length; j++) {
                  result += text[j - 1];
                }
              }
              if (list[1] == 'b') {
                for (let j = 1; j <= text.length; j++) {
                  if (!(j % 7) && text[j] != undefined) {
                    result += text[j - 1] + '\n';
                  } else {
                    result += text[j - 1];
                  }
                }
              }
              if (list[1] == 'c') {
                for (let j = 1; j <= text.length; j++) {
                  if (!(j % 7) && text[j] != undefined) {
                    result += text[j - 1] + '\n';
                  } else {
                    result += text[j - 1];
                  }
                }
              }

              return list[0] + list[1] + list[2] + result + list[list.length - 1];
            },


            rich: {
              a: {
                color: '#0FDD8D'
              },
              b: {
                color: '#0FDD8D',
                align: 'left',
              },
              c: {
                color: '#0FDD8D'
              }
            },
          },
          indicator: [
            { name: '{a|45 协调}', max: 10 },
            { name: '{b|88 敏捷}', max: 10 },
            { name: '{c|46 力量}', max: 10 },
            { name: '{c|76 平衡}', max: 10 },
            { name: '{c|55 速度}', max: 10 }
          ],
          axisLine: {
            lineStyle: {
              color: 'rgba(155, 234, 213, 1)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(55, 213, 171, 1)',
              width: 1
            }
          },
          splitNumber: 3
        },
        series: [{
          name: '预算 vs 开销（Budget vs spending）',
          type: 'radar',
          symbol: "none", // 去除边框拐角点
          data: [
            {
              value: [9, 4, 8],
              areaStyle: {
                opacity: 1,
                color: new echarts.graphic.RadialGradient(1, 1, 1, [
                  {
                    color: '#38D5AB',
                    offset: 0
                  },
                  {
                    color: '#C2FF85',
                    offset: 1
                  }
                ]),
              },
              lineStyle: {
                width: 0
              }
            }
          ]
        }]
      }
      myChart.setOption(option)
    },
    change_class(index) {
      var arr = this.class_arr;
      console.log(index)
      for (var i in arr) {
        if (arr[index].istap == 1) {
          arr[index].istap = 0;
          return;
        } else {
          arr[index].istap = 1;
          return;
        }
      }
    },
    change_spotr(index) {
      var arr = this.sport_arr;
      for (var i in arr) {
        if (arr[index].istap == 1) {
          arr[index].istap = 0;
          return;
        } else {
          arr[index].istap = 1;
          return;
        }
      }
    },

    // 作业管理首页表
    getWorkTable() {
      this.$http({
        url: this.$http.adornUrl('queryPageTimetable'),
        method: 'POST',
        data: {
          "sort": true,
          "offset": 0,
          "pageSize": 2,
          "queryParam": JSON.parse(sessionStorage.getItem('userMsg'))
        }
      }).then(res => {
        console.log(res);
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.train_nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.1302rem;
  .show_one {
    width: 18.5%;
    border-radius: 0.0417rem;
    padding: 0.1458rem 0 0.2083rem 0;
    text-align: center;
    background-color: white;
    > p:nth-of-type(1) {
      font-size: 0.1875rem;
      color: #fff;
      margin-bottom: 0.0417rem;
      color: #0fdd8d;
    }
    > p:nth-of-type(2) {
      font-size: 0.0625rem;
      color: #888;
    }
  }
  .train_one {
    width: 18.5%;
    border-radius: 0.0417rem;
    padding: 0.1458rem 0 0.2083rem 0;
    text-align: center;
    &:hover {
      cursor: pointer;
    }
    > p:nth-of-type(1) {
      font-size: 0.0625rem;
      color: #fff;
    }
    > p:nth-of-type(2) {
      font-size: 0.1875rem;
      color: #fff;
      margin: 0.0417rem 0;
    }
    > div {
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 0.1042rem;
        height: 0.1042rem;
        margin-right: 0.026rem;
      }
      p {
        font-size: 0.0938rem;
        color: #fff;
      }
    }
  }
  .train_one:nth-of-type(1) {
    background-color: #24aaff;
  }
  .train_one:nth-of-type(2) {
    background-color: #0fdd8d;
  }
  .train_one:nth-of-type(3) {
    background-color: #ffd02e;
  }
  .train_one:nth-of-type(4) {
    background-color: #fe7c73;
  }
  .train_one:nth-of-type(5) {
    background-color: #38f1ff;
  }
}
.all_train {
  display: flex;
  background-color: white;
  border-radius: 0.0781rem;
  height: 2.3438rem;
  margin-bottom: 0.1302rem;
  .all_train_one:first-child {
    border-right: 0.0052rem solid #f2f2f2;
  }
  .all_train_one {
    width: 50%;
    padding: 0.1354rem 0.2031rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    > p {
      position: absolute;
      left: 0.2031rem;
      top: 0.1354rem;
      font-size: 0.0938rem;
      color: #525252;
    }
  }
}
.circle_box {
  display: flex;
  align-items: center;
  justify-content: space-around;

  .main_text > p {
    display: flex;
    align-items: center;
    margin-bottom: 0.1042rem;
    span {
      font-size: 0.0625rem;
      color: #888888;
      margin-right: 0.1563rem;
    }
    > span:nth-of-type(1) {
      width: 0.0729rem;
      height: 0.0729rem;
      border-radius: 50%;
      margin-right: 0.0521rem;
    }
  }
  .main_text > p:last-child {
    margin-bottom: 0;
  }
}
.class_jun {
  padding: 0.1771rem 0.151rem;
  background-color: white;
  border-radius: 0.0781rem;
  > p {
    font-size: 0.0938rem;
    color: #525252;
  }
}
.jun_box {
  display: flex;
  justify-content: space-between;
  .jun_left {
    width: 75%;
  }
  .jun_right {
    padding-top: 0.2563rem;
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    .main_text > p {
      display: flex;
      align-items: center;
      margin-bottom: 0.2083rem;
      span {
        font-size: 0.0625rem;
        color: #888888;
        margin-right: 0.1563rem;
      }
      > span:nth-of-type(1) {
        width: 0.0729rem;
        height: 0.0729rem;
        border-radius: 50%;
        margin-right: 0.0521rem;
      }
    }
    .main_text > p:last-child {
      margin-bottom: 0;
    }
  }
}
.copyRight {
  color: #9b9b9b;
  font-size: 0.0729rem;
  text-align: center;
  margin: 0.2083rem 0;
}
</style>
